<template>
  <div :style="margin">
    <el-divider :border-style="props.data.style">
      {{ props.data.text }}
    </el-divider>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElDivider } from 'element-plus'

const props = defineProps<{ data: Record<string, any>; form: Record<string, any> }>()
const margin = computed(() => {
  const css: any = {}
  if (props.data.marginTop) {
    css.marginTop = `${props.data.marginTop}px`
  }
  if (props.data.marginRight) {
    css.marginRight = `${props.data.marginRight}px`
  }
  if (props.data.marginBottom) {
    css.marginBottom = `${props.data.marginBottom}px`
  }
  if (props.data.marginLeft) {
    css.marginLeft = `${props.data.marginLeft}px`
  }
  return css
})
</script>

<style lang="scss" scoped></style>
